<!-- 
CHEN Di
2013/11/8
-->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>弹层-图片浏览</title>
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/common.css">	
		<link rel="stylesheet" href="../css/component_imgGallery.css">
		<script src="../jslib/jquery_1_8_3.min.js"></script>
	</head>
	<body>   
		<div class="imgGalleryWrapper">

			<div class="bigImg">
				<!-- <img alt="" src="../images/imageGalleryImages/img00.jpg" data-src="./images/img00.jpg">
				<img alt="" data-src="../images/imageGalleryImages/img01.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img02.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img03.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img04.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img05.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img06.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img07.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img08.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img09.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img10.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img00.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img01.jpg" class="hidden">
				<img alt="" data-src="../images/imageGalleryImages/img02.jpg" class="hidden"> -->
				
				<div class="bigImg-leftButton btn-sprite"></div> <!-- 左边按钮 -->
				<div class="bigImg-rightButton btn-sprite"></div> <!-- 右边按钮 -->
			</div> 

			<div class="thumbnail-wrapper"> <!-- 小图浏览区域 --> 
				<div class="thumbnail-leftButton-wrapper"><span class="thumbnail-leftButton btn-sprite"></span></div>
				<div class="thumbnail-list-window">
					<ul class="thumbnail-list">
						<!-- <li>
							<img src="../images/imageGalleryImages/imgSmall00.jpg" class="active">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
						</li>
						<li>
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
						</li>
						<li>
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							<img src="../images/imageGalleryImages/imgSmall00.jpg">
							
						</li> -->
					</ul>
				</div>
				<div class="thumbnail-rightButton-wrapper"><span class="thumbnail-rightButton btn-sprite"></span></div>	
			</div> 

		</div>

		<script src="../js/ECar.imageGallery.js"></script>
		<script>
			var imageGalleryOptions = {
				imageGallery: ".imgGalleryWrapper",
				thumbnailLeftButton: ".thumbnail-leftButton-wrapper",
				thumbnailRightButton: ".thumbnail-rightButton-wrapper",
				bigImgLeftButton: ".bigImg-leftButton",
				bigImgRightButton: ".bigImg-rightButton",
				thumbnailList: ".thumbnail-list",
				bigImg: ".bigImg",
				numImgsPerList: 6,
				url: "../images/imageGalleryImages/imgSrc0.json"
			};
			ECar.imageGallery(imageGalleryOptions);	// 弹窗弹起的时候调用
		</script>
	</body>
</html>